bootstrap 模态框modal('show')加载报错解决
2019年5月5日 23:49
bootstrap 模态框加载报错：Uncaught TypeError: $(...).modal is not a function 怎么解决呢？
bootstrap 提供了一个模态框 modal，我这里用来做了个图片的弹出放大。关于模态框的介绍，在bootstrap上有介绍：具体 看这里
根据他的例子，很简单就可以做出个简单的小demo，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
$(function(){
$(".panel-body img").click(function(){
var _this = $(this);//将当前的img元素作为_this传入函数
$('#myModal img')[0].src = _this[0].src;
$('#myModal').modal('show');
});
});
</script>
<div class="panel panel-default">
<div class="panel-body">
<img src="img/1.jpg"><br>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade text-center" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" style="width: auto; display: inline-block">
<div class="modal-content" >
<div class="modal-body" >
<img src="" style="width: auto; max-width:1200px">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>
大体思路就是，点击图片---> 给模态框img赋值源地址--->显示模态框。本地调试也是非常OK，但是加到此网站就开始报错了。。。点击图片没反应，打开F12调试，看到如下报错：
我了个擦，这是什么情况？代码都一样的怎么还不好使呢？打印出来的这个方法确实是未定义的。。感觉像是bootstrap.js没有加载上呢？博主此时是一脸蒙比，于是各种网上搜解决方法。
此处省略一万字，一个小时。。。。。
最后发现了问题出在jquery.js文件 和 bootstrap.js文件的引用顺序，以下列举几种情形：
1、先看一个正确的情形，跟上面的代码一样的引用顺序：
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
...........
...........
</body>
2、再看一个会报错的：
<body>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
...........
...........
</body>
其实上面这种情形很容易发现，boostrap的注释写的很清楚，jquery要放在最前面，所以上面这种引用顺序会报错。
3、最后一个是最坑 最隐蔽的错误：
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
...........
...........
<!--在界面某个地方又引用了jquery.js 此时就会有问题！！！！！-->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</body>
上面这种情形就会出现 Uncaught TypeError: $(...).modal is not a function 报错，非常的坑。。。
最终翻了翻代码，发现博主别的地方还引用了jquery.js。其实这个也怪我，没有仔细规范好代码，总是这里一坨 那里一坨，css js都没很好的分离，最后在这浪费了时间。下次找个时间争取重构下吧。
上一篇 下一篇
辉哥，我继续提需求奥